<template>
  <div class="xqsect">
    <div v-for="good in good" :key="good.id">
 <div class="panel" >
      <div class="title-con">
        <!-- 商品名称 -->
        <div class="title1">
          {{ good.name }}
        </div>
      </div>
      <div class="price-panel">
        <div class="price-type range-price-con">
          <div class="range-price-item">
            <div class="start-number">原价</div>
            <div class="price-desc">
              ¥
              <span class="price">{{ good.money }}</span>
            </div>
          </div>
          <div class="range-price-item">
            <div class="start-number">优惠价</div>
            <div class="price-desc">
              ¥
              <span class="price">{{ good.money-10 }}</span>
            </div>
          </div>
          <div class="range-price-item">
            <div class="start-number">终极优惠价</div>
            <div class="price-desc">
              ¥
              <span class="price">{{ good.money -30}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="extra-con">
        <div class="stock">供货量 737个</div>
        <div class="freight">
          <div class="freight-panel">
            <span>邮费 ¥<span>6.00</span></span>
          </div>
        </div>
      </div>
      <div class="delivery-promise">
        <span
          ><i class="lighting"
            ></i
          >72小时内发货</span
        >
      </div>
    </div>
    <!-- 评价 -->
    <div class="panel rate">
      <div class="rate_title">
        <span>订单评价 (34)</span>
        <a
          href="/products/928964479/rate/591907?spm=d2FwLnlpd3Vnby5jb20v.d2FwLnlpd3Vnby5jb20vY2F0ZWdvcmllcw==.d2FwLnlpd3Vnby5jb20vc2VhcmNo.d2FwLnlpd3Vnby5jb20vcHJvZHVjdHMvOTI4OTY0NDc5"
          >查看全部 &nbsp;></a
        >
      </div>
      <div class="rate_content">
        <div class="rate_info">
          <div class="logo">
            <span>老方</span>
            <img src="http://img1.yiwugou.com/ywgimages/huiyuan/icon-100.png" />
          </div>
          <div class="content"><span>一般般</span></div>
        </div>
      </div>
    </div>
    <!-- 货号 -->
    <div class="panel">
      <div class="product-code">
        <span>榜单</span> <span class="code">{{ good.textea }}</span>
      </div>
    </div>
    <!-- 商铺名称 -->
    <div class="panel">
      <div class="shop-con">
        <div class="left">
          <img
            src="https://img2.baidu.com/it/u=4093739844,192698847&fm=26&fmt=auto"
          />
        </div>
        <div class="right">
          <div class="shop-name">{{ good.where }}</div>
          <div class="shop-address">
            地址：北京市海淀区安宁庄路小米科技园
          </div>
        </div>
      </div>
    </div>
    <!-- 产品名称规格 -->
    <div class="panel">
      <div class="intro">{{ good.desc }}</div>
    </div>
    <!-- 产品展示 -->
    <div class="panel">
      <div class="detail-title">商品详情</div>
      <div class="img">
        <div>
          <img :src="good.img" />
        </div>
        <div>
          <img :src="good.imgs" />
        </div>
        <div>
          <img :src="good.img" />
        </div>
        <div>
          <img :src="good.imgs" />
        </div>
      </div>
    </div>


    </div>
   
  </div>
</template>

<script>
import service from "../../../../api/apiserver"
export default {
  name: "XQsect",
  data() {
    return {
      good: {},
      arr:{}
    };
  },
  created() {
    // console.log("created", this.$route.params.id);
service("/xiangqing").then((ok)=>{
   
    this.arr = ok.data
    // console.log(this.arr);
     this.good = this.arr.filter((v) => {
          if (v.id == this.$route.query.id) {
            return v;
          }

  })
  //  console.log(this.good);
  })

  }
}
</script>

<style scope>
.panel {
  background: #fff;
  padding: 0 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #999;
}
.title-con {
  position: relative;
  padding: 0.08rem 0;
  height: 0.44rem;
  display: flex;
  align-items: center;
  border-bottom: solid 1px #e5e5e5;
}
.title-con .title1 {
  -webkit-box-flex: 1;
  /* flex: 1; */
  line-height: 0.22rem;
  font-size: 0.14rem;
  color: #333;
  /* background: #fff; */
  overflow: hidden;
  text-overflow: ellipsis;
}
.title1 {
  /* width: 100%; */
  height: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 0.03rem solid white;
}
.price-panel {
  color: #f60;
  font-size: 0.12rem;
  text-align: center;
}
.range-price-con {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  position: relative;
  padding: 0.08rem 0;
  border-bottom: solid 1px #e5e5e5;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
.range-price-con .range-price-item .start-number {
  color: #999;
}
.range-price-con .range-price-item .price-desc {
  padding-top: 0.08rem;
  color: #f50;
  font-size: 0.12rem;
  font-weight: 500;
}
.range-price-con .range-price-item .price-desc .price {
  font-size: 0.2rem;
}
.delivery-promise,
.extra-con {
  padding: 0.08rem 0;
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 0.12rem;
  position: relative;
}
.extra-con:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 0.01rem;
  border-top: 0.01rem solid #e5e5e5;
  color: #e5e5e5;
}
.lighting img {
  width: 0.3rem;
  vertical-align: bottom;
}
.panel {
  background: #fff;
  padding: 0 0.1rem;
  margin-bottom: 0.1rem;
  font-size: 0.12rem;
  color: #999;
  line-height: 0.3rem;
}
.rate .rate_title {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.rate .rate_title a {
  color: #f60;
}
.rate .rate_content {
  line-height: 0.2rem;
  padding-bottom: 0.1rem;
}
.rate .rate_content img {
  width: 0.2rem;
  margin-left: 0.05rem;
}
.xqsect {
  background-color: #f3f0f0;
}
.panel {
  background: #fff;
  padding: 0 0.1rem;
  margin-bottom: 0.1rem;
  font-size: 0.12rem;
  color: #999;
}
.panel .product-code .code {
  margin-left: 0.1rem;
  color: #333;
}
.panel .shop-con {
  display: flex;
  padding: 0.1rem 0;
}
.panel .shop-con .left {
  height: 0.5rem;
}
.panel .shop-con .left img {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.1rem;
  border-radius: 0.04rem;
}
.panel .shop-con .right {
  flex: 1;
  line-height: 0.16rem;
  overflow: hidden;
  color: #999;
  font-size: 0.12rem;
}
.panel .shop-con .right .shop-name {
  margin-top: 0.08rem;
  line-height: 0.18rem;
  margin-bottom: 0.04rem;
  font-size: 0.15rem;
  color: #333;
}
.panel .intro {
  line-height: 0.22rem;
  padding: 0.1rem 0;
}
.panel .detail-title {
  padding: 0.16rem 0;
  text-align: center;
}
.img img {
  width: 100%;
  height: 4.14rem;
}
</style>
